
<template>
	<div class="header">
		<div class="header-list">
			<div class="header-top">
				<div class="logo">
					<a href="#" title="婚必选"></a>
				</div>
				<div>

					<ul class="header-menu">
						<li v-for="(v, i) in headlist" :key="i">
							<router-link :to="v.path">
								<span>{{ v.title }}</span>
							</router-link>
						</li>
					</ul>
				</div>

				<div class="header-right">
					<div class="header-right-l">
						<a style="margin-right: 10px;">云上宴会厅</a>
						<a>婚礼咖</a>
					</div>
					<div class="header-right-m">
						<div class="user" @click.stop="dialogVisible = true"></div>
						<div class="notice">
							<span class="redicon"></span>
						</div>
						<div class="line"></div>
						<div class="address">
							<span>河北</span>
							<i></i>
						</div>
					</div>


				</div>



			</div>
		</div>
	</div>
	<!-- 婚庆公司登录 -->
	<el-dialog v-model="dialogVisible" width="570px" :before-close="handleClose" :show-close="false">



		<div class="dialogtitle">
			婚庆公司登录
		</div>
		<div class="formbox" ref="loginFormRef" :model="loginForm" :rules="rules">
			<input type="text" placeholder="请输入手机号/邮箱" class="input1"  :v-model="loginForm.username" />
			<input type="password" placeholder="登录密码" class="input1" :v-model="loginForm.password" prefix-icon="Lock" show-password/>
			<div class="btn1" style="margin-bottom:10px"  @click="login">登录</div>
			<div class="btn1">注册</div>
			<div class="group">
				<a class="a1">验证码登录</a>
				<a class="a1">忘记密码？</a>
			</div>
			<div class="group2">
				<div class="line1"></div>
				<a href="###">其他登录方式</a>
				<div class="line1"></div>
			</div>
			<a class="changea" @click="change">服务人员登录</a>
		</div>
		
	</el-dialog>
	<!-- 服务人员登录 -->
	<el-dialog v-model="dialogVisible2" width="570px" :before-close="handleClose" :show-close="false">
		<div class="dialogtitle">
			服务人员登录
		</div>
		<div class="formbox">
			<input type="text" placeholder="请输入手机号/邮箱" class="input1" />
			<input type="text" placeholder="登录密码" class="input1" />
			<div class="btn1" style="margin-bottom:10px">登录</div>
			<div class="btn1">注册</div>
			<div class="group">
				<a class="a1">验证码登录</a>
				<a class="a1">忘记密码？</a>
			</div>
			<div class="group2">
				<div class="line1"></div>
				<a href="###">其他登录方式</a>
				<div class="line1"></div>
			</div>
			<a class="changea">婚庆公司登录</a>
		</div>
		
	</el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue';
import request from '@/utils/request.js';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

let headlist = ref([{
	title: '首页',
	path: '/index'
},
{
	title: '主持人团队',
	path: '/index'
},
{
	title: '化妆师团队',
	path: '/index'
},
{
	title: '摄影团队',
	path: '/index'
},
{
	title: '摄像团队',
	path: '/index'
},
{
	title: '督导团队',
	path: '/index'
},
])
//登录
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const change = () => {
	dialogVisible.value = false
	setTimeout(() => {
		dialogVisible2.value = true
	}, 500);
};
const loginFormRef = ref(null);
const loginForm = reactive({
  username: '',
  password: '',
});

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
};
const router = useRouter();
	
const login = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      request.post('/api/login', loginForm).then((res) => {
        if (res.data.code === '200') {
          ElMessage.success('登录成功');
          localStorage.setItem('token', res.data.data.token); // 存储 token
          localStorage.setItem('user', JSON.stringify(res.data.data.user)); // 存储用户信息
          setTimeout(() => {
            router.push('/home'); // 跳转到主页
          }, 500);
        } else {
          ElMessage.error(res.data.msg);
        }
      }).catch((error) => {
        ElMessage.error('登录失败，请稍后再试');
        console.error(error);
      });
    }
  });
	
}




</script>
<style scoped lang="scss">
.header-list {
	height: 100px;
}

.header {
	background: rgba(20, 20, 20, 0.8);
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	height: 100px;
	z-index: 999;
	padding: 8px 0px;
}

.header-top {
	/* width: 1920px; */
	height: 100px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 100px;
	padding-left: 100px;

}

.logo {
	width: 238px;
	height: 137px;
	background: url(../assets/images/logo.png) no-repeat center;
	background-size: cover;
	position: relative;
	top: -14px;
}

.logo a {
	/* 	background:url(../assets/images/logo.png) no-repeat center;

	width: 238px;
	height: 137px;
	left: 110px;
	opacity: 1;
	display: inline-block;
	background-size: contain; */
}

.header-top ul {
	list-style: none;
	/* 去掉项目符号 */
	font-size: 22px;
	display: flex;

}

.header-menu li {
	position: relative;
	opacity: 1;
	color: rgba(254, 238, 212, 1);
	margin-right: 30px;
	font-weight: 400;

	a {
		text-decoration: none;
	}

}

.header-menu li span {
	font-size: 22px;
	color: rgba(254, 238, 212, 1);

}

.header-top ul li span:hover {
	color: rgba(250, 187, 88, 1);
}

.header-menu li::before {
	content: '';
	position: absolute;
	bottom: -20px;
	left: 50%;
	width: 0;
	height: 100px;
	border-bottom: 3px solid rgba(250, 187, 88, 1);
	transition: all 0.2s;
}

.header-menu li:hover::before {
	content: '';
	width: 100%;
	left: 0;
}

.header-right {
	display: flex;
}

.header-right-l {
	display: flex;

}

.header-right-l a {
	width: 119px;
	height: 33px;
	opacity: 1;
	border: 1px solid rgba(210, 148, 55, 1);
	border-radius: 30px;
	display: block;
	align-items: center;
	text-align: center;
	color: rgb(250, 187, 88);
	line-height: 33px;
}

.header-right-m {
	padding-left: 10px;
	display: flex;
	align-items: center;

	.user {
		width: 24px;
		height: 24px;
		background: url(../assets/images/user.png) no-repeat center;
		background-size: cover;
		margin-right: 10px;
		cursor: pointer;
		
	}

	.notice {
		width: 21px;
		height: 25px;
		background: url(../assets/images/notice.png) no-repeat center;
		background-size: cover;
		position: relative;
		margin-right: 10px;

		.redicon {
			position: absolute;
			width: 9px;
			height: 9px;
			background: rgba(255, 51, 51, 1);
			display: block;
			border-radius: 50%;
			right: -1px;
			top: -2px;
		}
	}

	.line {
		width: 1px;
		height: 20px;
		border-radius: 100px;
		background: rgba(153, 153, 153, 1);
	}

	.address {
		display: flex;
		align-items: center;
		margin-left: 10px;

		span {
			color: rgba(209, 201, 184, 1);
			font-size: 20px;
		}

		i {
			width: 7px;
			height: 4px;
			background: url(../assets/images/down.jpg) no-repeat center;
			background-size: cover;
			margin-left: 10px;
			display: block;
		}
	}
}

/* 婚庆公司登录弹框 */
input,
button,
textarea {

	border: none;
	/* 移除边框 */
	outline: none;
	/* 移除轮廓（在一些浏览器中，聚焦时还会有轮廓） */

}

.dialogtitle {
	color: rgba(36, 36, 36, 1);
	font-family: AlibabaPuHuiTi;
	font-weight: 500;
	font-size: 34px;
	line-height: 47px;
	text-align: center;

}

.formbox {
	padding: 0px 60px;
	padding-top: 30px;

	.input1 {
		height: 71px;
		border-radius: 4px;
		background: rgba(240, 240, 240, 1);
		width: 100%;
		font-size: 18px;
		color: rgba(166, 166, 166, 1);
		padding-left: 18px;
		margin-bottom: 20px;
	}
	.btn1 {
		width: 100%;
		height: 71px;
		background: rgba(19, 21, 23, 1);
		border-radius: 4px;
		color: #fff;
		font-size: 24px;
		color: rgba(254, 238, 212, 1);
		font-size: 22px;
		text-align: center;
		line-height: 71px;
		cursor: pointer;

	}
	.group {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		.a1 {
			color: rgba(166, 166, 166, 1);
			font-size: 18px;
		}
	}
	.group2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		a {
			color: rgba(166, 166, 166, 1);
			font-family: AlibabaPuHuiTi;
			font-size: 18px;
			text-align: center;
			text-decoration: none;
		}
		.line1 {
			width: 133px;
			height: 5px;
			background:url(../assets/images/line1.png) no-repeat center;

		}
	}
	.changea {
		width: 154px;
		height: 41px;
		border-radius: 35.5px;
		background: rgba(240, 240, 240, 1);
		display:block;
		text-align: center;
		line-height: 41px;
		margin: 0 auto;
		margin-top:25px;
		cursor: pointer;
	}

}
</style>